<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .container{ height:150px; background-color:pink; margin:0 auto;}
    /* 1.超小屏幕下 <768 布局宽度为100% */
    @media screen and (max-width:767px){
        .container{ width:100%;}
    }
    @media screen and (min-width:768px){
        .container{ width:750px;}
    }
    @media screen and (min-width:992px){
        .container{ width:970px;}
    }
    @media screen and (min-width:1200px){
        .container{ width:1170px;}
    }
    
</style>
<body>
    <!--
响应式开发原理
    就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
 1.设备划分
    超小屏幕：<768px  手机
    小屏设备：<+768px ~ <992px  平板
    中等屏幕：>=992px ~ <1200px
    宽屏设备: >1200px
响应式布局容器
 响应式布局需要一个父级作为布局容器，来配合自己元素来实现变化效果

 常用响应式尺寸划分
  超小屏幕：设置宽度为100%；
  小屏幕： 设置宽度为750px
  中等屏幕： 宽度设置为970px；
  大屏幕： 设置宽度为：1170px；     
-->



</body>
</html>